<template>
	<div class="person">
		<h1>一辆{{ car.brand }}车，价值{{ car.price }}万元</h1>
		<button @click="changePrice">修改汽车的价格</button>
		<br>
		<h2>游戏列表：</h2>
		<ul>
			<li v-for="g in games" :key="g.id">
				{{ g.name }}
			</li>
		</ul>
		<button @click="changeFirstGame">修改第一个游戏的名字</button>

	</div>
</template>
<script setup>
import { ref } from 'vue';
//数据
let car = ref({ brand: '北汽', price: 18 })
let games = ref([
	{ id: 'game1', name: '王者荣耀' },
	{ id: 'game2', name: '英雄联盟' },
	{ id: 'game3', name: 'Apex' },
])
//方法
function changePrice() {
	car.value.price = 7.89
}
function changeFirstGame() {
	games.value[0].name = '流星蝴蝶剑'
}

</script>
<style>
.person {
	padding: 10px;
}
</style>